<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>回调地狱</title>
  </head>
  <body>
    <script>
      // 回调地狱
      function sendAjax(url, data, success, error) {
        // 实例xhr
        const xhr = new XMLHttpRequest()
        // 绑定监听
        // 处理请求数据
        let str = ''
        for (let key in data) {
          str += `${key}=${data[key]}&`
        }
        str = str.slice(0, -1)
        // 发送请求初始化
        xhr.open('GET', url + '?' + str)
        // 请求格式
        xhr.responseType = 'json'
        // 发送请求
        xhr.send()
        // 判断请求状态
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              success(xhr.response)
            } else {
              error('error!!!')
            }
          }
        }
      }

      sendAjax(
        'https://api.apiopen.top/api/getShortVideo?',
        { page: 0, size: 10 },
        (response) => {
          console.log('成功了1', response)
          sendAjax(
            'https://api.apiopen.top/api/getShortVideo?',
            { page: 0, size: 10 },
            (response) => {
              console.log('成功了2', response)
              sendAjax(
                'https://api.apiopen.top/api/getShortVideo?',
                { page: 0, size: 10 },
                (response) => {
                  console.log('成功了3', response)
                },
                (err) => {
                  console.log('失败了3', err)
                }
              )
            },
            (err) => {
              console.log('失败了2', err)
            }
          )
        },
        (err) => {
          console.log('失败了1', err)
        }
      )
    </script>
  </body>
</html>
